body{
    background:url("../img/test.png");
}
/*
    1.webpack用来做什么呢？
    在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
    但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，
    将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
    对于webpack本身的能力来说，对于这些转化是不支持的。
    那怎么办呢？给webpack扩展对应的loader就可以啦。

    2.loader使用过程：
    步骤一：通过npm安装需要使用的loader
    步骤二：在webpack.config.js中的module关键字下进行配置
    大部分loader我们都可以在webpack的官网中找到，并且学习对应的用法。

*/

/*
     webpack在打包时，会根据我们的入口文件main.js中的依赖以此去找，在main.js中没有依赖关系的文件，他不会打包
*/

/*
   webpack官网——中文文档——loader——样式——css-loader
   安装 css-loader
         1.运行npm install --save-dev css-loader
   安装style-loader
        1. 运行：npm install --save-dev style-loader
         2.在webpack.config.js文件中配置style-loader和css-loader：
           module.exports = {
              module: {
                rules: [
                  {
                    test: /\.css$/i,
                    use: ["style-loader", "css-loader"],
                   },
                        ],
              },
            };
         3.在main.js文件中依赖normal.css文件
              require('./css/normal.css');

   卸载安装了的loader 运行 npm uninstall style-loader
                        npm uninstall css-loader
*/

/*
    webpack官网——中文文档——loader——url loader
    安装url-loader:
    1.运行 npm install --save-dev url-loader@1.1.2
    2.在webpack.config.js文件中配置url-loader
     {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
*/

/*
    file-loader安装：
    1.运行：npm install --save-dev file-loader
     --save-dev 写在中间或最后面都可以
    2.不需要配置
*/


/*
    如果你仔细阅读webpack打包的js文件，发现写的ES6语法并没有转成ES5，
    那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。
    在前面我们说过，如果希望将ES6的语法转成ES5，那么就需要使用babel
   安装babel-loader：
      1.运行npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1
      2.在webpack.config.js文件中配置babel-loader
       {
        test: /\.js$/,
        // exclude：排除
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
*/